<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';

import { preferences } from '@/lib/preferences';

import avatar from '@/assets/img/avatar.png';
import { useUserStore } from '@/store/user';
import { SendHorizontal } from 'lucide-vue-next';

defineOptions({
  name: 'Login',
});
const emits = defineEmits(['logined']);
const title = preferences.app.name;
const userStore = useUserStore();
const haveSavedUserName = ref(false);
const user_name = ref<string>(userStore.userInfo?.username ||'web-os');
const user_password = ref();
const isUserNameError = ref(false);
const isUserPasswordError = ref(false);

const login = () => {
  if (!user_name.value) {
    isUserNameError.value = true;
    setTimeout(() => {
      isUserNameError.value = false;
    }, 1000);
    return;
  }
  if (!user_password.value) {
    isUserPasswordError.value = true;
    setTimeout(() => {
      isUserPasswordError.value = false;
    }, 1000);
    return;
  }

  userStore.setAccessToken(user_name.value);
  emits('logined');
  userStore.setUserInfo({
    avatar,
    userId: user_name.value,
    username: user_name.value,
  });
};
// 回车登录
const loginKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter') {
    login();
  }
};

const date = ref(new Date());
const currentDate = computed(() => {
  return `${date.value.getMonth() + 1}月${date.value.getDate()}日`;
});
const currentDay = computed(() => {
  const days = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
  ];
  return days[date.value.getDay()];
});

const time = ref('');

const updateTime = () => {
  const now = new Date();
  const hour = now.getHours().toString().padStart(2, '0');
  const minute = now.getMinutes().toString().padStart(2, '0');

  time.value = `${hour}:${minute}`;
};

let timer: number | undefined;

onMounted(() => {
  user_name.value = userStore.userInfo?.username || title || 'web-os';
  if (user_name.value) {
    haveSavedUserName.value = true;
  }

  timer = window.setInterval(updateTime, 1000);
});

onUnmounted(() => {
  timer && window.clearInterval(timer);
  timer = undefined;
});
</script>

<template>
  <div class="login">
    <div class="date-time">
      <div class="date">{{ currentDate }} {{ currentDay }}</div>
      <div class="time">{{ time }}</div>
    </div>
    <div class="login-info">
      <div class="head">
        <img :src="avatar" alt="Web OS" />
      </div>
      <div class="message">
        {{ haveSavedUserName ? user_name : '请先登录' }}
      </div>
      <div class="form">
        <div v-if="!haveSavedUserName" :class="isUserNameError ? 'error' : ''" class="item">
          <input v-model="user_name" class="account" placeholder="输入账号" @keydown="loginKeydown" />
        </div>
        <div :class="isUserPasswordError ? 'error' : ''" class="item">
          <input v-model="user_password" :class="user_password ? 'password-in' : ''"
            class="password" placeholder="输入密码" type="password" @keydown="loginKeydown" />
          <div :class="user_password ? 'click-enable' : ''" class="login-button focus-visible:shadow-md" @click="login">
            <SendHorizontal />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import url('./css/Login.scss');
</style>
